<template>
    <div class="topGuideBox">
        <div class="guideBox flex">
            <div class="guideItem" :class="active > 0 ? 'userSel':'userNor'"></div>
            <div class="guideItem" :class="active > 1 ? 'mapSel':'mapNor'"></div>
            <div class="guideItem" :class="active > 2 ? 'waypointsSel':'waypointsNor'"></div>
            <div class="guideItem" :class="active > 3 ? 'trcksSel':'trcksNor'"></div>
            <div class="guideItem" :class="active > 4 ? 'moreSel':'moreNor'"></div>
        </div>
        <div class="stepsBox">
            <el-steps :active="active" finish-status="success" align-center>
                <el-step title="权限"></el-step>
                <el-step title="地图"></el-step>
                <el-step title="站点"></el-step>
                <el-step title="轨迹"></el-step>
                <el-step title="更多"></el-step>
            </el-steps>
        </div>
    </div>
</template>

<script>
import store from '../../store'
import { guideNext } from '@/js/methods'
export default {
    name: 'guide',
    components:{
        
    },
    data(){
        return{
           active: store.state.guideIndex
        }
    },
    mounted(){
        
    },

    methods:{
        next() {
            // guideNext(num);
        }
    },

    //属性监听
    watch:{
       "$store.state.guideIndex":function(val){
           this.active = val;
       }
    }

}
</script>

<style scoped lang="less">
 .topGuideBox{
     position: absolute;
     top: 36px;
     z-index: 5;
     width: 100%;
     background-color: #ffffff;
     .guideBox{
         margin-top: 10px;
         height: 45px;
         border-bottom: 1px solid rgba(0,0,0,.04);
         .guideItem{
             flex: 1;
             height: 100%;
             background-repeat: no-repeat;
             background-position: center;
             background-size: 20px;
             border-right: 1px solid rgba(0,0,0,0.04);
             &:last-child{
                 border-right: none;
             }
         }
         .userSel{
             background-image: url("../../assets/icon-user-sel.png");
         }
         .userNor{
             background-image: url("../../assets/icon-user-nor.png");
         }
        .mapSel{
            background-image: url("../../assets/icon-map-sel.png");
         }
         .mapNor{
             background-image: url("../../assets/icon-map-nor.png");
         }
         .waypointsSel{
             background-image: url("../../assets/icon-newBranch-sel.png");
         }
         .waypointsNor{
             background-image: url("../../assets/icon-newBranch-nor.png");
         }
         .trcksSel{
             background-image: url("../../assets/icon-track-sel.png");
         }
         .trcksNor{
             background-image: url("../../assets/icon-track-nor.png");
         }
         .moreSel{
             background-image: url("../../assets/icon-more-Sel.png");
         }
         .moreNor{
             background-image: url("../../assets/icon-more-nor.png");
         }
     }
     .stepsBox{
         margin-top: 10px;
     }
 }
</style>